<template>
  <div class="index-container">
    <el-form>
      <el-form-item>
        <el-select v-model="value1" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="card">
      <el-card class="elCards">
        <div class="left">
          <div class="el-icon-edit-outline icon"></div>
          <div class="white">字体</div>
        </div>
        <div class="right">
          <div class="top">0</div>
          <div class="bottom">32-5</div>
        </div>
      </el-card>
      <el-card class="elCards">
        <div class="left">
          <div class="el-icon-s-custom icon"></div>
          <div class="white">字体</div>
        </div>
        <div class="right"></div>
      </el-card>
      <el-card class="elCards">
        <div class="left">
          <div class="el-icon-date icon"></div>
          <div class="white">字体</div>
        </div>
        <div class="right"></div>
      </el-card>
      <el-card class="elCards">
        <div class="left">
          <div class="el-icon-trophy icon"></div>
          <div class="white">字体</div>
        </div>
        <div class="right"></div>
      </el-card>
    </div>
    <div class="db">
      <div class="db-s">
        <el-card>
          <div class="card-header">待办事项</div>
          <div class="card-body">
            <el-card>
              <div class="first">1</div>
              <div class="second">低电量车辆</div>
            </el-card>
            <el-card>
              <div class="first">1</div>
              <div class="second">低电量车辆</div>
            </el-card>
            <el-card>
              <div class="first">1</div>
              <div class="second">低电量车辆</div>
            </el-card>
            <el-card>
              <div class="first">1</div>
              <div class="second">低电量车辆</div>
            </el-card>
            <el-card>
              <div class="first">1</div>
              <div class="second">低电量车辆</div>
            </el-card>
          </div>
        </el-card>
        <el-card>
          <div class="card-top">
            <div class="card-top-left">总收益趋势</div>
            <div class="card-top-right">这块需要用echarts的东西</div>
          </div>
          <div class="card-bottom"><Access /></div>
        </el-card>
      </div>
      <div class="db-s">
        <el-card>
          <div class="card-top">
            <div class="card-top-left">总收益趋势</div>
            <div class="card-top-right">这块需要用echarts的东西</div>
          </div>
          <div class="card-bottom">
            <AddU />
          </div>
        </el-card>
        <el-card>
          <div class="card-top">
            <div class="card-top-left">总收益趋势</div>
            <div class="card-top-right">这块需要用echarts的东西</div>
          </div>
          <div class="card-bottom">
            <AddO />
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer">
      <el-card class="el-first">
        <div class="first-top">
          <span>骑行排行榜</span>
          <span>echart的部分</span>
        </div>
        <div class="first-bottom">
          <el-table>
            <el-table-column label="排行" />
            <el-table-column label="手机号" />
            <el-table-column label="骑行次数" />
          </el-table>
        </div>
      </el-card>
      <el-card class="el-second">
        <div class="second-top">
          <span>骑行排行榜</span>
          <span>echart的部分</span>
        </div>
        <div class="second-bottom">
          <div class="second-left">
            <el-table>
              <el-table-column label="机型" />
              <el-table-column label="用户数" />
              <el-table-column label="占比" />
            </el-table>
          </div>
          <div class="second-right">
            <Pie />
          </div>
        </div>
      </el-card>
      <el-card class="el-third" />
    </div>
  </div>
</template>

<script>
  // import { getList } from '@/api/table'
  import Access from './components/access'
  import AddU from './components/addU'
  import AddO from './components/addO'
  import Pie from './components/pie'
  // import { quyu } from '@/api/shouye'
  export default {
    components: {
      Access,
      AddU,
      AddO,
      Pie,
    },
    data() {
      return {
        options1: [
          { value: '选项1', label: '全部区域' },
          { value: '选项2', label: '郑州' },
          { value: '选项3', label: '禹洲' },
          { value: '选项4', label: '杭州' },
          { value: '选项5', label: '苏州' },
        ],
        // quyu: {},
        value1: '',
      }
    },
    created() {},
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .card {
    display: flex;
    justify-content: space-between;
  }
  .elCards {
    width: 300px;
  }
  .left {
    font-size: 50px;
    text-align: center;
    float: left;
  }
  .left div:nth-of-type(2) {
    font-size: 20px;
  }
  .right {
    font-size: 30px;
    float: right;
  }
  .right div:nth-of-type(1) {
    margin-top: 2px;
  }
  .right div:nth-of-type(2) {
    font-size: 16px;
    margin-top: 20px;
  }
  .db {
    display: flex;
    justify-content: space-between;
  }
  .db-s {
    width: 47%;
  }
  .card-header {
    font-size: 40px;
  }
  .card-body {
    display: flex;
    justify-content: space-between;
    text-align: center;
  }
  .card-body .first {
    font-size: 24px;
    color: tomato;
    margin-bottom: 5px;
  }
  .card-top {
    display: flex;
    justify-content: space-between;
    color: rgb(54, 163, 247);
  }
  .card-top-left {
    font-size: 20px;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    height: 500px;
    // flex: 1 1 auto;
  }
  .footer .el-first {
    // flex-grow: 1;
    width: 24%;
    margin: 0 2px 0;
  }
  .footer .el-second {
    // flex-grow: 2;
    width: 48%;
    margin: 0 10px 0;
  }
  .footer .el-third {
    // flex-grow: 1;
    width: 24%;
    margin: 0 2px 0;
  }
  .first-top {
    margin-bottom: 30px;
    color: rgb(54, 163, 247);
    display: flex;
    justify-content: space-between;
  }
  .first-top span:nth-of-type(1) {
    font-size: 24px;
  }
  .first-bottom {
    width: 100%;
  }
  .second-top {
    margin-bottom: 30px;
    color: rgb(54, 163, 247);
    display: flex;
    justify-content: space-between;
  }
  .second-top span:nth-of-type(1) {
    font-size: 24px;
  }
  .second-bottom {
    display: flex;
    justify-content: space-between;
  }
  .second-left {
    width: 60%;
  }
  // .echarts {
  //   // margin-left: -200px;
  //   // background-color: tomato;
  // }
  .second-right {
    width: 35%;
  }
</style>
